<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-06-25 00:41:56
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 我的知识库
-->
<template>
  <div class="my-container">
    <div class="page-title">我的知识库 <div class="btn-box" @click="manualShow = true"><span
          class="iconfont icon-18erji-2"></span>
        人工对话模型</div>
    </div>
    <div class="up-box">
      <div class="up-body">
        <div class="icon-box">
          <span class="iconfont icon-jia1"></span>
        </div>
        <div class="text">上传知识库信息</div>
        <UpTextFile class="up-file" :url="''" @getFile="getFile" />
      </div>
    </div>
    <div class="page-body">
      <div v-for="item in dataList" :key="item.uid" class="my-list-box">
        <div class="title">{{ item.title }} <span class="status iconfont"
            :class="{ 'icon-shuaxin': item.nlp_file_status === 0, 'icon-xuanzhong': item.nlp_file_status === 1, 'icon-gantanhao1': item.nlp_file_status === 2 }"></span>
        </div>
        <div class="text">文件大小：{{ bytesTosize(item.disk_size) }}</div>
        <div class="text">上传日期：{{ item.create_datetime }}</div>
        <div class="btn-box">
          <span class="btn" @click="open(item)">预览</span>
          <span class="btn" @click="delFun(item)">删除</span>
        </div>
      </div>
    </div>
    <div class="page-foot">
      <PaginationCom :pagination-data="pagination" :page-sizes="pageSizes" @paginationFun="paginationFun" />
    </div>
    <div v-if="manualShow" class="manual-box">
      <ManualSession :model-uniqueid="model_uniqueid" @close="closeFun" />
    </div>
  </div>
</template>

<script>
import PaginationCom from '@/components/pagination/pagination'
import ManualSession from '@/components/manual-session/manual-session'
import { getList } from '@/api/model'
import { getApi, delApi, upknowledgeApi } from '@/api/knowledge'
import UpTextFile from '@/components/upload/up-text-file.vue'
export default {
  components: {
    PaginationCom,
    UpTextFile,
    ManualSession
  },
  data() {
    return {
      process: process.env.VUE_APP_FILE_text_API,
      model_uniqueid: '11f324c3c8a348ffaf6d7dda59909655',
      modelData: {},
      allData: [],
      dataList: [
        // {
        //   'id': 1128,
        //   'title': '越秀区东风东路575号401.pdf', // 文件名称
        //   'model_uniqueid': '1d4a51a52cc9491e94a419e10cea650c',
        //   'oss_url': 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr/1d4a51a52cc9491e94a419e10cea650c/knowledge/aa36a55134cb4d9e9fd2158a56f13d8c-越秀区东风东路575号401.pdf', // oss存放地址
        //   'media_type': 'application/pdf', // 文件类型
        //   'disk_size': 15638036, // 大小 字节
        //   'create_datetime': '2024-06-19 15:04:08',
        //   'update_datetime': '2024-06-19 15:04:08',
        //   'users_uniqueid': 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr',
        //   'media_hash': 'aa36a55134cb4d9e9fd2158a56f13d8c',
        //   'nlp_file_status': 0// nlp处理状态:0=处理中,1=成功,2=失败
        // },
        // {
        //   'id': 1129,
        //   'title': '越秀区东风东路575号401.pdf',
        //   'model_uniqueid': '1d4a51a52cc9491e94a419e10cea650c',
        //   'oss_url': 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr/1d4a51a52cc9491e94a419e10cea650c/knowledge/ac61b22944ac40179bacab8f965fb454-越秀区东风东路575号401.pdf',
        //   'media_type': 'application/pdf',
        //   'disk_size': 156336,
        //   'create_datetime': '2024-06-19 15:09:35',
        //   'update_datetime': '2024-06-19 15:09:35',
        //   'users_uniqueid': 'n6mbo00lqb0d0djwg4dx5bnuc3npmgqr',
        //   'media_hash': 'ac61b22944ac40179bacab8f965fb454'
        // }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 1000,
        total: 0
      },
      pageSizes: [10, 20, 30, 40],
      upFile: null,
      manualShow: false
    }
  },
  created() {
    this.getModelData()
  },
  methods: {
    getModelData() {
      const data = {
        'knowledge_switch': 1// 模型唯一值
      }
      getList(data).then(res => {
        if (res.data.length > 0) {
          this.model_uniqueid = res.data[0].model_uniqueid
          this.modelData = res.data[0]
          this.getData()
        }
      })
    },
    getData() {
      const data = {
        'model_uniqueid': this.model_uniqueid // 模型唯一值
      }
      getApi(data).then(res => {
        this.allData = res.data
        this.setData()
      })
    },
    paginationFun(val) {
      this.pagination = val
      this.setData()
    },
    chooseFun(item) {
      this.showData = JSON.parse(JSON.stringify(item))
      this.dialogShow = true
    },
    setData() {
      const e = this.pagination.currentPage * this.pagination.pageSize
      const s = e - this.pagination.pageSize
      this.dataList = this.allData.slice(s, e)
    },
    bytesTosize(bytes) {
      if (bytes === 0 || bytes === '') {
        return {
          size: 0,
          unit: 'B'
        }
      }
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      // return (bytes / Math.pow(k, i)) + ' ' + sizes[i]
      return (bytes / Math.pow(k, i)).toFixed(2) + '' + sizes[i]
    },
    open(item) {
      window.open(this.process + item.oss_url, '_blank')
    },
    delFun(item) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          'model_uniqueid': this.model_uniqueid, // 模型唯一值
          id: item.id
        }
        delApi(data).then(() => {
          this.getData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    getFile(file) {
      this.upFile = file.raw
      const formData = new FormData()
      formData.append('model_uniqueid', this.model_uniqueid)
      formData.append('file', this.upFile)
      upknowledgeApi(formData).then(() => {
        this.getData()
      })
    },
    closeFun() {
      this.manualShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
.my-container {
  padding: 20px;
  background: #FFFFFF;
  width: 100%;
  height: 100%;

  .page-title {
    font-weight: 600;
    font-size: 20px;
    color: #1C1F23;
    line-height: 23px;
    text-align: left;
    height: 40px;
    position: relative;

    .btn-box {
      position: absolute;
      right: 1px;
      top: 0;
      width: 140px;
      height: 30px;
      line-height: 30px;
      background: #04D1B8;
      border-radius: 4px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      text-align: center;
      cursor: pointer;
    }
  }

  .up-box {
    width: 100%;
    height: 120px;
    background: #F4F5F9;
    border-radius: 4px;
    border: 1px dashed #E0E0E0;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 24px;

    .up-body {
      width: 200px;
      height: 100%;
      margin: 0 auto;
      position: relative;

      .up-file {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }

    .icon-box {
      width: 34px;
      height: 34px;
      line-height: 30px;
      border: 3px solid #333;
      border-radius: 7px;
      margin: 0 auto;
      color: #04D1B8;
      cursor: pointer;
    }

    .text {
      font-weight: 600;
      font-size: 20px;
      color: #1C1F23;
      line-height: 23px;
      text-align: center;
      padding-top: 5px;
      cursor: pointer;
    }
  }

  .page-body {
    width: 100%;
    height: calc(100% - 230px);
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;

    .my-list-box {
      width: 334px;
      height: 94px;
      margin: 10px 0;
      margin-right: 80px;
      border-radius: 2px;
      border: 1px dashed #DCDCDC;
      padding: 16px;
      position: relative;

      .title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
        line-height: 16px;
        padding-bottom: 8px;

        .icon {
          font-size: 12px;
        }

        .icon-shuaxin,
        .icon-xuanzhong {
          color: #04D1B8;
        }

        .icon-gantanhao1 {
          color: #D54941;
        }
      }

      .text {
        font-weight: 400;
        font-size: 12px;
        color: #9E9E9E;
        line-height: 18px;
      }

      .btn-box {
        position: absolute;
        right: 1px;
        top: 12px;

        .btn {
          cursor: pointer;
          font-size: 12px;
          color: #04D1B8;
          padding: 3px 5px;
        }

        .btn:hover {
          color: #2ca192;
        }
      }
    }
  }

  .page-foot {
    width: 100%;
    height: 50px;
  }

  .video-box {
    width: 800px;
    height: 600px;

    .my-video {
      width: 100%;
      height: 100%;
    }
  }

  .manual-box {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 90;
    width: 794px;
    height: 100%;
    background: #FFFFFF;
    box-shadow: -20px 0px 20px 0px rgba(0, 0, 0, 0.1);
  }
}
</style>
